<template>
  <div>
    <el-checkbox-group v-model="choosed" @change="getChecked">
      <el-checkbox
        v-for="(item, index) in options"
        :key="index"
        :label="item.code"
      >
        <span style="margin-right: 10px;">{{ item.code }}</span>
        <el-input v-model="item.title" placeholder="请输入内容" @blur="changeTitle" :validate-event="false"></el-input>
        <div class="img-box" style="display: inline-block;">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="item.img" :src="item.img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-checkbox>
    </el-checkbox-group>
    <el-button type="danger" @click="addNewOption" style="margin: 15px 0 15px 15px;">+增加选项与答案</el-button>
  </div>
</template>

<script>
import { getQuestDetail } from '@/api/querstionbank'

export default {
  name: 'MultiOption',
  props: {
    optionId: {
      required:false
    },
    resetData: Boolean
  },
  data() {
    return {
      choosed: [],
      resetForm: [
        {
          id: null,
          code: 'A',
          title: '',
          img: '',
          isRight: 0
        },
        {
          id: null,
          code: 'B',
          title: '',
          img: '',
          isRight: 0
        },
        {
          id: null,
          code: 'C',
          title: '',
          img: '',
          isRight: 0
        },
        {
          id: null,
          code: 'D',
          title: '',
          img: '',
          isRight: 0
        }
      ],
      options: this.option || [
        {
          id: null,
          code: 'A',
          title: '',
          img: '',
          isRight: 0
        },
        {
          id: null,
          code: 'B',
          title: '',
          img: '',
          isRight: 0
        },
        {
          id: null,
          code: 'C',
          title: '',
          img: '',
          isRight: 0
        },
        {
          id: null,
          code: 'D',
          title: '',
          img: '',
          isRight: 0
        }
      ]
    }
  },

  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    addNewOption() {
      const option = {
        id: null,
        code: String.fromCharCode(this.options[this.options.length-1].code.charCodeAt()+1),
        title: '',
        img: '',
        isRight: 0
      }
      this.options.push(option)
    },
    getChecked(val) {
      this.choosed = val
      this.options.forEach(item=>{
        if(this.choosed.includes(item.code)){
          item.isRight = 1
        }else {
          item.isRight = 0
        }
      })
      this.$emit('passOption', this.options)
    },
    changeTitle(val) {
      console.log(val)
      if(val !== '') {
        this.$emit('passOption', this.options)
      }else {
        return
      }
    },
    // 修改
    async getOption() {
      const res = await getQuestDetail(this.optionId)
      this.options = res.options || this.resetForm
      this.options.forEach(item => {
        if(item.isRight === 1) {
          this.choosed.push(item.code)
        }else {
          return
        }
      })
      console.log(this.choosed)
    }
  },
  created(){
    if (this.optionId) {
      this.getOption()
    }
  },
  watch: {
    resetData(val) {
      if (val) {
        this.options = this.resetForm
        this.choosed = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
.img-box{
  margin-bottom: 10px;
  margin-left: 10px;
  width: 150px;
  height: 100px;
  border: 1px dashed black;
}
::v-deep .el-radio__inner{
  border: 1px solid black;
}
</style>
